<template>
	<el-menu class="el-menu-vertical" :collapse="isCollapse">
		<el-menu-item @click="collapseMenu">
			<i :class="collapseIcon"></i>
		</el-menu-item>
		<el-submenu v-for="item in this.$store.state.app.menuList" :key="item.meta.id" :index="item.meta.id">
			<template slot="title">
				<i :class="item.meta.icon"></i>
				<span slot="title">{{item.meta.title}}</span>
			</template>
			<el-menu-item v-for="sub in item.children" :index="sub.meta.id" :key="sub.meta.id" @click="toRouterVue(`${sub.name}`)">
				<i :class="sub.meta.icon"></i>{{sub.meta.title}}
				<!-- <template slot="title">
					<i :class="sub.meta.icon"></i>
					<span slot="title">{{sub.meta.title}}</span>
				</template> -->
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				collapseIcon: 'el-icon-s-fold',
			}
		},
		mounted() {
		},
		methods: {
			collapseMenu() {
				if (this.isCollapse) {
					this.isCollapse = false
					this.collapseIcon = 'el-icon-s-unfold'

				} else {
					this.isCollapse = true
					this.collapseIcon = 'el-icon-s-fold'
				}
			},
			toRouterVue(param){
				if(this.$route.name !== param){
					this.$router.push({name:param});
				}
			}
		}
	};
</script>

<style>
	.el-menu-vertical {
		height: 100vh;
	}

	.el-menu-vertical:not(.el-menu--collapse) {
		width: 200px;
	}
</style>